Class Box
public var id;
public var name;
public var removed=false;
public var children=[];
var listeners=[];
var changed=false;
var enabled=true;
var subEnabled=true;
var visible=true;
var relative=0;
var absolute=false;
var alpha=1;
var rotation=0;
var gray=false;
var x=0;
var y=0;
var w=0;
var h=0;
var scaleX=1;
var scaleY=1;
var pivot;
var bg;
var bgDashed=false;
var mask=false;
var scroll=false;
var padding=0;
var shadow;
var dimTo;
var borderSize=[0,0];

function Box(param){
	BoxAid.init();
	if(!this.div){
		this.div=document.createElement("div");
		this.div.className="__box";
		this.div.box=this;
		this.removed=false;
	}
	else{
		this.div.style.cssText="";
		while(this.div.childNodes.length>0){
			this.div.removeChild(this.div.childNodes[0]);
		}
	}
	BoxAid.birthNode.appendChild(this.div);
	this.__isBox=true;
	if(this.__class==Main){
		G.main=this;
		this.setMask(true);
		this.setSize(G.w,G.h);
		G.stage.addChild(this);
	}
	if(this.__class==Box&&param){
		this.set(param);
	}
	if(this.onPress) this.addListener(Evt.PRESS,this,this.onPress);
	if(this.onRelease) this.addListener(Evt.RELEASE,this,this.onRelease);
	if(this.onClick) this.addListener(Evt.CLICK,this,this.onClick);
	if(this.onButtonPreClick) this.addListener(Evt.BUTTON_CLICK,this,this.onButtonPreClick);
	if(this.onButtonClick) this.addListener(Evt.BUTTON_CLICK,this,this.onButtonClick);
	if(this.onChange) this.addListener(Evt.CHANGE,this,this.onChange);
	if(this.onKeyDown) G.stage.addListener(Evt.KEY_DOWN,this,this.onKeyDown);
}
function set(param){
	for(var k in param){
		if(k=="x"||k=="y"||k=="w"||k=="h"||k=="pos"||k=="size"||k=="bg") continue;
		var func=this["set"+k.charAt(0).toUpperCase()+k.slice(1)];
		var child=this[k];
		if(typeof(func)=="function"){
			func.call(this,param[k]);
		}
		else if(child&&typeof(child)=="object"&&child.__isBox){
			child.set(param[k]);
		}
		else{
			this[k]=param[k];
		}
	}
	if(param.w!=null) this.setW(param.w);
	if(param.h!=null) this.setH(param.h);
	if(param.size) this.setSize.apply(this,param.size);
	if(param.x!=null) this.setX(param.x);
	if(param.y!=null) this.setY(param.y);
	if(param.pos) this.setPos.apply(this,param.pos);
	if(param.bg) this.setBg(param.bg);
}
public function addChild(child,index=-1){
	this.scrollChangeSelf();
	if(is(Array,child)){
		return BoxAid.addAML(this,child);
	}
	else if(is(String,child)){
		child=new Img(child);
	}
	else if(child.__isClass){
		child=Class.new(child);
	}
	else if(!child.__isBox){
		var param=child;
		child=this.addChild(new Box());
		child.set(param);
		if(param.dim) this[param.dim]=child;
	}
	if(!this.subEnabled) child.setEnabled(false);
	if(this.relative>0){
		if(child.visible&&!child.absolute){
			child.div.style.position="static";
		}
		if(this.relative>1){
			child.div.style.display="inline-block";
		}
		if(this.relative==1&&child.w==0){
			child.setW("f");
		}
	}
	if(child.parent){
		var n=child.parent.children.indexOf(child);
		child.parent.children.splice(n,1);
	}
	if(index==-1||index>=this.children.length){
		this.div.appendChild(child.div);
		this.children.push(child);
	}
	else{
		var child2=this.children[index];
		this.div.insertBefore(child.div,child2.div);
		this.children.splice(index,0,child);
	}
	child.parent=this;
	child.onAdded();
	return child;
}
public function remove(){
	if(this.parent) this.parent.scrollChangeSelf();
	this.remove2(this);
	for(var i=G.stage.listeners.length-1;i>=0;i--){
		var arr=G.stage.listeners[i];
		var caller=arr[2];
		if(caller.__isBox&&caller.removed){
			G.stage.div.removeEventListener(arr[0],arr[1]);
			G.stage.listeners.splice(i,1);
		}
	}
	for(var i=GAid.laterCalls.length-1;i>=0;i--){
		var obj=GAid.laterCalls[i];
		var caller=obj.foo[0];
		if(caller.__isBox&&caller.removed){
			obj.status=2;
		}
	}
}
function remove2(box){
	box.removed=true;
	box.div.style.cssText="";
	if(box.onRemove) box.onRemove.apply(box);
	var pools=Class.poolHash[box.__className];
	if(!pools) pools=Class.poolHash[box.__className]=[];
	pools.push(box);

	while(box.listeners&&box.listeners.length>0){
		var arr=box.listeners.shift();
		box.div.removeEventListener(arr[0],arr[1]);
	}
	if(box.parent){
		var n=box.parent.children.indexOf(box);
		box.parent.children.splice(n,1);
		box.parent.div.removeChild(box.div);
		box.parent=null;
	}
	while(box.children.length>0){
		var child=box.children[0];
		this.remove2(child);
	}
}
public function removeChildren(){
	while(this.children.length>0){
		var child=this.children[0];
		child.remove();
	}
}
public function getChild(name){
	for(var i=0;i<this.children.length;i++){
		var child=this.children[i];
		if(child.id==name) return child;
		if(child.name==name) return child;
	}
	return null;
}
public function addListener(type,caller,func){
	if(typeof(caller)=="function"){
		func=caller;
		caller=null;
	}
	var evtFunc=function(evt){
		if(evt.type=="click"&&!evt.enabled) return;
		func.call(caller,evt);
	}
	this.div.addEventListener(type,evtFunc);
	this.listeners.push([type,evtFunc,caller]);
}
public function dispatchEvent(evt){
	this.div.dispatchEvent(evt);
}
public function setPos(x,y,w,h){
	if(w!=null||h!=null){
		this.setSize(w||this.w,h||this.h);
	}
	if(x!=null) this.setX(x,false);
	if(y!=null) this.setY(y,false);
	this.resetTransform();
}
public function setSize(w,h){
	if(w==null) w=this.w;
	if(h==null) h=this.h;
	this.__w=w;
	if(typeof(w)=="string"&&w.charAt(0)=="f"){
		w=eval(w.replace("f",this.getParentW()));
	}
	this.w=w;
	this.div.style.width=w==0?"auto":w+"px";

	this.__h=h;
	if(typeof(h)=="string"&&h.charAt(0)=="f"){
		h=eval(h.replace("f",this.getParentH()));
	}
	this.h=h;
	if(this.mask||this.relative==0||this.scroll){
		this.div.style.height=h==0?"auto":h+"px";
		this.div.style.minHeight="auto";
	}
	else{
		this.div.style.height="auto";
		this.div.style.minHeight=h==0?"auto":h+"px";
	}
	if(this.__pivot=="c"&&this.w>0&&this.h>0){
		this.setPivot("c");
	}
	if(this.parent) this.parent.scrollChangeSelf();
}
public function contains(target){
	while(target){
		if(this==target) return true;
		target=target.parent;
	}
	return false;
}
public function inScroll(){
	var box=this;
	while(box&&box!=G.stage){
		if(box.scroll) return true;
		box=box.parent;
	}
	return false;
}
public function transit(param,doBack){
	if(!param){
		this.div.style[G.toCssKey("Transition")]="none";
		this.doTransit=null;
		return;
	}
	this.doTransit=doBack;
	var ease=param.ease||0;
	var time=param.time||300;
	var delay=param.delay||0;
	delete param.ease;
	delete param.time;
	delete param.delay;
	var easeExpr="linear";
	if(ease==1) easeExpr="cubic-bezier(0.215, 0.61, 0.355, 1)";
	if(ease==2) easeExpr="cubic-bezier(0.55, 0.055, 0.675, 0.19)";
	if(ease==3) easeExpr="cubic-bezier(0.175,0.885,0.32,1.275)";
	if(ease==4) easeExpr="cubic-bezier(0.6,-0.28,0.735,0.045)";
	var param2;
	for(var k in param){
		var v=param[k];
		if(!is(Array,v)) continue;
		if(!param2) param2={};
		param2[k]=v[0];
		param[k]=v[1];
	}
	if(param2) this.set(param2);
	if(this.scaleX==0) this.setScale(0.01);
	this.div.scrollTop=this.div.scrollTop;
	this.div.style[G.toCssKey("Transition")]="all "+(time/1000)+"s "+easeExpr+" "+(delay/1000)+"s";
	this.set(param);
	if(this.scaleX==0) this.setScale(0.01);
	callLater([this,this.transitEnd],time+delay+50);
}
function transitEnd(){
	this.div.style[G.toCssKey("Transition")]="none";
	call(this.doTransit);
}
function hitTest(x,y){
	var r=this.div.getBoundingClientRect();
	var rx=r.left/G.scale;
	var ry=r.top/G.scale;
	return x>rx&&x<rx+this.w&&y>ry&&y<ry+this.h;
}
public function startDrag(range,doDrag=null,useSlide=true,bounceSize=0){
	Drag.start(this,range,doDrag,useSlide,bounceSize);
}
public function resetSelf(){
}
public function resetTransform(){
	var px=!this.pivot?0:this.pivot[0];
	var py=!this.pivot?0:this.pivot[1];
	if(px!=0||py!=0){
		this.div.style[G.toCssKey("TransformOrigin")]=px+"px "+py+"px";
	}
	var x=this.x-px;
	var y=this.y-py;
	var str="";
	if(G.platform==1||x!=0||y!=0) str+="translate3d("+x+"px,"+y+"px,0) ";
	if(this.scaleX!=1||this.scaleY!=1) str+="scale("+this.scaleX+","+this.scaleY+") ";
	if(this.rotation!=0) str+="rotate("+this.rotation+"deg)";
	this.div.style[G.toCssKey("Transform")]=str;
}
public function changeSelf(){
	if(!GAid.changedHash) GAid.changedHash={};
	GAid.changedHash[this.__id]=this;
}
public function scrollChangeSelf(){
	if(!this.scroll) return;
	if(!GAid.scrollChangedHash) GAid.scrollChangedHash={};
	GAid.scrollChangedHash[this.__id]=this;
}
public function getClientW(){
	return this.div.clientWidth;
}
public function getClientH(){
	return this.div.clientHeight;
}
public function getAbsX(){
	return this.div.getBoundingClientRect().left/G.scale;
}
public function getAbsY(){
	return this.div.getBoundingClientRect().top/G.scale;
}
public function setEnabled(v){
	this.enabled=v;
	this.div.style.pointerEvents=v?"auto":"none";
}
public function setVisible(v){
	this.visible=v;
	if(v){
		this.div.style.visibility="";
		if(this.parent&&this.parent.relative){
			this.div.style.position="static";
			this.div.style.top="auto";
		}
		else{
			this.div.style.position="absolute";
		}
	}
	else{
		this.div.style.visibility="hidden";
		this.div.style.position="absolute";
		if(this.parent&&this.parent.relative) this.div.style.top="0";
	}
	if(this.parent) this.parent.scrollChangeSelf();
}
public function getDepth(){
	if(!this.parent) return -1;
	for(var i=0;i<this.parent.children.length;i++){
		if(this.parent.children[i]==this) return i;
	}
	return -1;
}
public function getParentW(){
	return this.parent?(this.parent.w==0?this.parent.children[0].w:this.parent.w)-this.parent.borderSize[0]:G.main.w;
}
public function getParentH(){
	return this.parent?(this.parent.h==0?this.parent.children[0].h:this.parent.h)-this.parent.borderSize[1]:G.main.h;
}
public function setX(v,change=true){
	this.__x=v;
	var type=typeof(v)=="string"?v.slice(0,1):null;
	if(type=="c"){
		if(this.w==0) this.w=this.getClientW();
		var w=this.pivot?0:this.w*this.scaleX;
		v=(this.getParentW()-w)/2+int(v.slice(1));
	}
	else if(type=="r"){
		if(this.w==0) this.w=this.getClientW();
		v=this.getParentW()-this.w*this.scaleX+int(v.slice(1));
	}
	else if(type=="f"){
		v=eval(v.replace("f",this.getParentW()));
	}
	else if(type=="+"&&this.parent&&this.parent.relative==0){
		var depth=this.getDepth();
		if(depth>0){
			var box=this.parent.children[depth-1];
			if(box.w==0) box.w=box.getClientW();
			v=box.x+box.w*this.scaleX+int(v.slice(1));
			this.y=box.y;
		}
		else{
			v=0;
		}
	}
	if(this.parent&&this.parent.relative>0){
		this.div.style.marginLeft=v+"px";
		v=0;
	}
	this.x=v;
	if(change) this.resetTransform();
}
public function setY(v,change=true){
	this.__y=v;
	var type=typeof(v)=="string"?v.slice(0,1):null;
	if(type=="c"){
		if(this.h==0) this.h=this.getClientH();
		var h=this.pivot?0:this.h*this.scaleX;
		v=(this.getParentH()-h)/2+int(v.slice(1));
	}
	else if(type=="b"){
		if(this.h==0) this.h=this.getClientH();
		v=this.getParentH()-this.h*this.scaleY+int(v.slice(1));
	}
	else if(type=="+"&&this.parent&&this.parent.relative==0){
		var depth=this.getDepth();
		if(depth>0){
			var box=this.parent.children[depth-1];
			if(box.h==0) box.h=box.getClientH();
			v=box.y+box.h*this.scaleY+int(v.slice(1));
		}
		else{
			v=0;
		}
	}
	if(this.parent&&this.parent.relative>0){
		this.div.style.marginTop=v;
		v=0;
	}
	this.y=v;
	if(change) this.resetTransform();
}
public function setW(v){
	this.setSize(v,this.h);
}
public function setH(v){
	this.setSize(this.w,v);
}
public function setAlpha(v){
	this.alpha=v;
	this.div.style.opacity=v;
}
public function setScale(v){
	this.scaleX=v;
	this.scaleY=v;
	this.resetTransform();
}
public function setScaleX(v){
	this.scaleX=v;
	this.resetTransform();
}
public function setScaleY(v){
	this.scaleY=v;
	this.resetTransform();
}
public function setRotation(v){
	this.rotation=v;
	this.resetTransform();
}
public function setPivot(v){
	this.__pivot=v;
	if(v=="c"){
		if(this.w==0) return;
		v=[this.w/2,this.h/2];
	}
	this.__pivot=v;
	this.pivot=v;
	this.resetTransform();
}
public function setBg(v){
	this.bg=v;
	if(is(Array,v)&&is(String,v[2])){
		var arr=G.bgStyle[v[2]];
		if(arr){
			var w=this.w;
			var h=this.h;
			for(var i=0;i<arr.length;i++){
				var a=arr[i];
				if(a){
					a=a.slice(0);
					for(var j=0;j<a.length;j++){
						a[j]=a[j]*[j%2==0?w:h]/100;
					}
				}
				v[3+i]=a;
			}
		}
		BoxAid.drawBgShape(this,v);
		return;
	}
	this.borderSize[0]=0;
	this.borderSize[1]=0;
	var a=["none","none","none","none","none","none","none","none","none"];
	if(is(String,v)){
		a[0]=!v?"none":G.toColor(v);
	}
	else if(is(Array,v)){
		if(is(Array,v[0])){
			var c1=G.toColor(v[0][0]);
			var c2=G.toColor(v[0][1]);
			var t=v[0][2]||1;
			var n=(v[0][3]||1)*100;
			var angleStr=(n/2)+"% 0,"+(n/2)+"% "+n+"%";
			if(t==2) angleStr="0 "+n+"%,"+n+"% 0";
			if(t==3) angleStr="0 "+(n/2)+"%,"+n+"% "+(n/2)+"%";
			if(t==4) angleStr=n+"% "+n+"%,0 0";
			a[0]=G.toCssKey("gradient")+"(linear,"+angleStr+",from("+c1+"),to("+c2+"))";
		}
		else{
			a[0]=!v?"none":G.toColor(v[0]);
		}
		for(var i=0;i<4;i++){
			var s=is(Array,v[1])?v[1][i]:v[1];
			if(!s) continue;
			var n=s.indexOf("#");
			var c=n==0?s:s.slice(n);
			var w=n==0?1:s.slice(0,n);
			this.borderSize[i>1?0:1]+=int(w);
			a[i+1]=w+"px "+(this.bgDashed?"dashed":"solid")+" "+G.toColor(c);
		}
		for(var i=0;i<4;i++){
			var n=is(Array,v[2])?v[2][i]:v[2];
			if(!n) continue;
			a[i+5]=n+"px";
		}
	}
	if(!is(Img,this)) this.div.style.background=a[0];
	this.div.style.borderTop=a[1];
	this.div.style.borderBottom=a[2];
	this.div.style.borderLeft=a[3];
	this.div.style.borderRight=a[4];
	this.div.style[G.toCssKey("BorderTopLeftRadius")]=a[5];
	this.div.style[G.toCssKey("BorderTopRightRadius")]=a[6];
	this.div.style[G.toCssKey("BorderBottomLeftRadius")]=a[7];
	this.div.style[G.toCssKey("BorderBottomRightRadius")]=a[8];
}
public function setBgDashed(v){
	this.bgDashed=v;
	if(this.bg) this.setBg(this.bg);
}
public function setGray(v){
	this.gray=v;
	this.div.style[G.toCssKey("Filter")]=v?"grayscale(100%)":"none";
}
public function setMask(v){
	this.mask=v;
	this.div.style.overflow=v?"hidden":"visible";
	this.setSize(this.w,this.h);
}
public function setRelative(v){
	this.relative=v;
	this.div.style.textAlign=v<=2?"left":(v==3?"center":"right");
	this.setSize(this.w,this.h);
}
public function setAbsolute(v){
	this.absolute=v;
}
public function setScroll(v){
	this.scroll=v;
	this.div.scroll=v;
	this.div.style.overflowY=v?"auto":"visible";
	this.div.style.overflowX=v?"hidden":"visible";
}
public function setPadding(v){
	this.padding=v;
	var isArr=is(Array,v);
	this.div.style.paddingTop=isArr?int(v[0])+"px":v+"px";
	this.div.style.paddingBottom=isArr?int(v[1])+"px":v+"px";
	this.div.style.paddingLeft=isArr?int(v[2])+"px":v+"px";
	this.div.style.paddingRight=isArr?int(v[3])+"px":v+"px";
}
public function setShadow(v){
	this.shadow=v;
	var css="none";
	if(is(Array,v)){
		css=v[0]+"px "+v[1]+"px "+v[2]+"px "+G.toColor(v[3]);
		if(v[4]) css+=" inset";
	}
	else if(v){
		css="5px 5px 5px "+G.toColor("#4000");
	}
	this.div.style.boxShadow=css;
}
public function onAdded(){
}